<!-- 设置动态表单组件--左侧控件列表 -->
<template>
  <div class="leftConfig">
    <div class="formSetUp">
      <!-- <div class="leftConfig-title">表单设置</div> -->
      <div class="formSetUp-body">
        <a-radio-group type="button" v-model="copyLayout">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <!-- <a-radio value="inline">行内排列</a-radio> -->
        </a-radio-group>
      </div>
    </div>
    <div class="tabs">
      <!--tabs列表  -->
      <a-tabs v-model:active-key="tabChoiceKey" size="mini">
        <a-tab-pane
          v-for="item in tabShowList"
          :key="item.code"
          :title="item.tabName"
        />
      </a-tabs>
      <!-- 拖拽组件 -->
      <draggable
        class="tabComponentBox"
        :list="componentTabList"
        :group="{ name: 'people', pull: 'clone', put: false }"
        itemKey="controlName"
        :clone="cloneItem"
      >
        <template #item="{ element }">
          <div class="tabComponentBox-item">
            <a-button
              style="display: flex; justify-content: flex-start"
              :size="'mini'"
            >
              <template #icon>
                <icon-font :type="element.icon" :size="14"></icon-font>
              </template>
              <template #default> {{ element.componentName }} </template>
            </a-button>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script setup lang="ts">
import cloneDeep from 'lodash.clonedeep';
import uniqueid from 'lodash.uniqueid';
import draggable from 'vuedraggable';
import { Icon } from '@arco-design/web-vue';
import { tabList, componentList } from '../../../setUpConfig';

const props = withDefaults(
  //参数说明
  defineProps<{
    tabCodeList: string[]; //tab显示的tab列表
    layout: string;
  }>(),
  {}
);

const emit = defineEmits(['layoutChange']);
const IconFont = Icon.addFromIconFontCn({
  src: 'https://at.alicdn.com/t/c/font_3782788_m3fazt9fbc.js'
});
const copyLayout = computed({
  get() {
    return props.layout;
  },
  set(val) {
    emit('layoutChange', val);
  }
});

const tabChoiceKey = ref('baseComponent'); //tab 选中的key

//通过tabCodeList过滤出要显示的tab列表
const tabShowList = computed<any>(() => {
  const list = props.tabCodeList.map((code) =>
    tabList.find((item) => code === item.code)
  );
  return list;
});

//通过tabShowList过滤出要显示的component列表
const componentTabList: any = computed(() => {
  const tabItem = tabShowList.value.find(
    (item: any) => tabChoiceKey.value === item.code
  );
  console.log('tabItem', tabItem);
  return tabItem?.componentCodeList.map((code: string) =>
    componentList.find((item) => item.code === code)
  );
});

//拖拽发生时retuan处理过后的数据
const cloneItem = (item: any) => {
  console.log('item', item);

  item.uuid = uniqueid('');
  let cloneData = cloneDeep(item);
  cloneData.cnName = cloneData.componentName;
  return cloneData;
};
</script>
<style lang="less" scoped>
.leftConfig {
  background: #fff;
  display: flex;
  flex-direction: column;
  .tabs {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .tabComponentBox {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;
      // height: 100%;
      // padding: 10px;

      &-item {
        border: rgb(212, 212, 212) dashed 1px;
        background: rgb(250, 250, 250);
        width: 100px;
        padding: 5px;
        margin: 5px;
        cursor: pointer;
      }
      :deep(.arco-btn-secondary) {
        width: 100%;
      }
      &-item:hover {
        background: rgb(241, 238, 255);
        span {
          color: rgb(181, 172, 226);
        }
      }
    }
  }
  height: 100%;
  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;
  }
}
.formSetUp {
  border-bottom: var(--color-neutral-3) solid 1px;
  &-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

// /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

// /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}
</style>
